import * as THREE from 'three'
export default function createAxis(domRef) {
    // 创建3D坐标系显示场景
    let axesScene = new THREE.Scene();
    let axesCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 10);
    axesCamera.position.z = 5;
    const axisContainer = new THREE.Group();

    // 创建坐标系线条
    const createAxisLine = (color, direction) => {
        const geometry = new THREE.BufferGeometry().setFromPoints([
            new THREE.Vector3(0, 0, 0),
            new THREE.Vector3().copy(direction).multiplyScalar(0.6)
        ]);
        const material = new THREE.LineBasicMaterial({
            color,
            linewidth: 3,
            transparent: true,
            opacity: 0.9
        });
        return new THREE.Line(geometry, material);
    };

    // 添加箭头头部
    const addArrowHead = (color, direction) => {
        const coneGeometry = new THREE.ConeGeometry(0.08, 0.2, 32);
        const coneMaterial = new THREE.MeshBasicMaterial({ color });
        const cone = new THREE.Mesh(coneGeometry, coneMaterial);

        cone.position.copy(direction).multiplyScalar(0.6);
        cone.lookAt(direction);
        cone.rotateX(Math.PI / 2);

        return cone;
    };

    // 添加标签
    const createAxisLabel = (text, color, position) => {
        const canvas = document.createElement('canvas');
        canvas.width = 64;
        canvas.height = 64;
        const context = canvas.getContext('2d');
        context.fillStyle = 'rgba(0, 0, 0, 0)';
        context.fillRect(0, 0, 64, 64);
        context.font = '24px Arial';
        context.fillStyle = color;
        context.textAlign = 'center';
        context.fillText(text, 32, 32);

        const texture = new THREE.CanvasTexture(canvas);
        const material = new THREE.SpriteMaterial({ map: texture });
        const sprite = new THREE.Sprite(material);
        sprite.scale.set(0.5, 0.5, 0.5);
        sprite.position.copy(position);
        return sprite;
    };
    

    const xAxis = createAxisLine(0xff5555, new THREE.Vector3(1, 0, 0));
    const yAxis = createAxisLine(0x55ff55, new THREE.Vector3(0, 1, 0));
    const zAxis = createAxisLine(0x5555ff, new THREE.Vector3(0, 0, 1));

    axisContainer.add(xAxis);
    axisContainer.add(yAxis);
    axisContainer.add(zAxis);
    axisContainer.add(addArrowHead(0xff5555, new THREE.Vector3(1, 0, 0)));
    axisContainer.add(addArrowHead(0x55ff55, new THREE.Vector3(0, 1, 0)));
    axisContainer.add(addArrowHead(0x5555ff, new THREE.Vector3(0, 0, 1)));

    

    const xLabel = createAxisLabel('X', '#ff0000', new THREE.Vector3(0.8, 0, 0));
    const yLabel = createAxisLabel('Y', '#00ff00', new THREE.Vector3(0, 0.8, 0));
    const zLabel = createAxisLabel('Z', '#0000ff', new THREE.Vector3(0, 0, 0.8));

    axisContainer.add(xLabel);
    axisContainer.add(yLabel);
    axisContainer.add(zLabel);
    axesScene.add(axisContainer)
    axesScene.position.set(0, 0, 0)

    // 创建坐标系渲染器
    let axesRenderer = new THREE.WebGLRenderer({
        alpha: true,
        antialias: true
    });
    axesRenderer.setSize(150, 150);
    axesRenderer.domElement.style.position = 'absolute';
    axesRenderer.domElement.style.bottom = '0px';
    axesRenderer.domElement.style.left = '0px';
    axesRenderer.domElement.style.pointerEvents = 'none';
    domRef.value.appendChild(axesRenderer.domElement)
 
    // 动画循环
    const render = () => {
        requestAnimationFrame(render);
        // 渲染2D坐标系
        axesRenderer.render(axesScene, axesCamera);
    };
    render()
    return {
        axesScene,
        axesCamera,
        axesRenderer,
        axisContainer
    }
}